
<template>
  <div>
    <div style="height:30px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right">
        <el-breadcrumb-item
          :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="never"
      class="mb20">
      <el-row :gutter="20">
        <el-form ref="form"
          :model="queryParam"
          label-width="100px">
          <el-col :lg="8">
            <el-form-item
              label="新闻分类"
              class="mb0">
              <el-select
                v-model="queryParam.type"
                style="width:100%"
                placeholder="请选择"
                @change="searchForm">
                <el-option
                  v-for="item in lists"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8">
            <el-form-item
              label="新闻标题"
              class="mb0">
              <el-input
                v-model="queryParam.title"
                placeholder="新闻标题" />
            </el-form-item>
          </el-col>
          <el-col :lg="8">
            <el-button
              type="primary"
              @click="searchForm()">搜索</el-button>
            <el-button
              @click="reset()">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <div
        style="margin-bottom:20px">
        <el-button
          type="primary"
          @click="addNews()">添加新闻</el-button>
      </div>
      <Table
        :table-data="tableDate"
        :table-class="'table_title_left'"
        :table-columns="columns"
        :is-selection="true"
        :page-size="pageSize"
        :page-num="pageNum"
        :total="total"
        :show-img="true"
        @changePage="changePage"
        @editTable="editTable"
        @ok="getTableList()" />
    </el-card>
  </div>
</template>

<script>
import { REQUEST_LIST } from '@/api/requestList'
import Table from './table.vue'

export default {
  name: 'ActiveList',
  components: {
    Table
  },
  props: ['info'],
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 25,
      list: [],
      tableLoading: false,
      queryParam: {
        title: '',
        type: 1
      },
      lists: [
        {
          id: 1,
          name: '集团新闻'
        },
        {
          id: 2,
          name: '基层动态'
        },
        {
          id: 5,
          name: '安全生产'
        }
      ],
      columns: [
        {
          title: '新闻标题',
          key: 'title',
          prop: 'title',
          align: 'left',
          modifiable: true,
          minwidth: '130',
          isShow: true,
          tooltip: false
        },
        {
          title: '新闻类别',
          key: 'typeName',
          prop: 'typeName',
          align: 'left',
          minwidth: '180',
          modifiable: true,
          isShow: true,
          tooltip: false
        },
        {
          title: '缩略图',
          key: 'imagesUrl',
          prop: 'imagesUrl',
          align: 'center',
          modifiable: true,
          isShow: true,
          minwidth: '110',
          tooltip: false
        },
        {
          title: '是否启用',
          key: 'isEnableName',
          prop: 'isEnableName',
          align: 'center',
          modifiable: true,
          isShow: true,
          minwidth: '150',
          tooltip: false
        },
        {
          title: '新闻简介',
          key: 'introduction',
          prop: 'introduction',
          align: 'left',
          modifiable: true,
          isShow: true,
          minwidth: '300',
          tooltip: false
        },
        {
          title: '首页置顶',
          key: 'isTop',
          prop: 'isTop',
          align: 'center',
          modifiable: true,
          isShow: true,
          minwidth: '100',
          tooltip: false
        },
        {
          title: '发布时间',
          key: 'time',
          prop: 'time',
          align: 'left',
          modifiable: true,
          isShow: true,
          minwidth: '120',
          tooltip: false
        },
        {
          title: '操作',
          key: 'action',
          prop: 'action',
          fixed: 'right',
          minwidth: '180',
          align: 'center',
          modifiable: true,
          isShow: true,
          tooltip: false
        }
      ],
      tableDate: [],
      pageArr: []
    }
  },
  watch: {
    info(e) {
      this.getTableList()
    }
  },
  mounted() {
    this.getTableList()
  },
  methods: {
    addNews() {
      this.$emit('go', { view: 'ActiveDetails', page: 'add' })
    },
    searchForm() {
      this.pageNum = 1
      this.getTableList()
    },
    /**
     * @description: 获取数据列表
     * @param {type}
     * @return:
     */
    getTableList() {
      this.tableLoading = true
      REQUEST_LIST.REQUST_FCN(
        'NEWSLIST',
        {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.queryParam.title,
          type: this.queryParam.type
        },
        true
      ).then(res => {
        this.tableDate = res.data.newsList
        this.tableDate.map((item, index) => {
          if (item.url) {
            this.$set(item, 'imagesUrl', res.data.imgUrl + '/' + item.url)
          }
        })
        this.total = parseInt(res.data.total)
        this.tableLoading = false
      })
    },
    /**
     * @description: 重置
     * @param {type}
     * @return:
     */
    reset() {
      this.pageNum = 1
      this.queryParam.title = ''
      this.queryParam.type = 1
      this.getTableList()
    },
    /**
     * @description: 翻页函数
     * @page {number}
     * @pageSize {number}
     * @return:
     */
    changePage(data) {
      this.pageNum = data.pageNum
      this.pageSize = data.pageSize
      this.getTableList()
    },
    editTable(e) {
      this.$emit('go', { view: 'ActiveDetails', page: 'edit', row: e.value })
    }
  }
}
</script>
